<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>制作家用商品分类页面</title>
	</head>
	<style>
		*{margin: 0;padding: 0;}
		.box{
			widows: 300px;
			background:-webkit-gradient(linear,0 0,0 100%,from(#0063AA),to(#C9E4F7));
			color: #FFF;
			margin-left:10px ;
			margin-right: 770px;
		}
		.box h1{
			font-size: 18px;
			height: 35px;
			line-height: 35px;
			margin-left: 15px;
		}
		#st1,#st2,#st3,#st4{
			width: 260px;
			background:-webkit-gradient(linear ,0 0,0 100%,color-stop(0.1,#E2F0FA),color-stop(0.5,#B1DAF6),color-stop(1,#E2F0FA));
			color: #0565C6;
			margin-left: 50px;
			margin-top:15px ;
			margin-bottom: 15px;
			line-height: 30px;
			
		}
		.box1 ul li{
			list-style: none;
			
			margin-left: 50px;
			line-height:30px;
			
		}
		
		.box1 ul li a{
			color: #4F4F4F;
			text-decoration: none;
		}
		span{
			color: #4F4F4F;
		}
		.stv{
			margin-left:30px ;
			font-size: 14px;
			font-weight: 900;
			color:#0565C6 ;
		}
		#t1,#t2,#t3,#t4{
			margin-left:70px ;
		}
	</style>
	<body>
		<div class="box">
			<h1>家用电器</h1>
		</div>
		<div class="box1">
			<ul >
				<li id="st1">
					<span class="stv">大家电</span>
				</li>
				<li id="t1">
					<a href="#">平板电视</a>
					<a href="#">洗衣机</a>
					<a href="#">冰箱</a>
				</li>
				<li>
					<a href="#">空调</a>
					<a href="#">烟机</a>
					<span>/</span>
					<a href="#">灶具</a>
					<a href="#">热水器</a>
				</li>
				<li>
					<a href="#">冷柜</a>
						<span>/</span>
					<a href="#">酒柜</a>
					<a href="#"> 消毒柜</a>
					<a href="#">家庭影院</a>
				</li>
			</ul>
			<ul>
				<li id="st2">
					<span class="stv">生活电器</span>
				</li>
				<li id="t2">
					<a href="#">电风扇</a>
					<a href="#">净化器</a>
					<a href="#">吸尘器箱</a>
				</li>
				<li>
					<a href="#">净水设备</a>
					<a href="#">挂烫机</a>
					<a href="#">电话机具</a>
				</li>
			</ul>
				<ul>
				<li id="st3">
					<span class="stv">厨房电器</span>
				</li>
				<li id="t3">
					<a href="#">榨汁机</a>
					<a href="#">电压力锅</a>
					<a href="#"> 电饭煲</a>
				</li>
				<li>
					<a href="#">豆浆机</a>
					<a href="#">微波炉</a>
					<a href="#">电磁炉</a>
				</li>
			</ul>
				</ul>
				<ul>
				<li id="st4">
					<span class="stv">五金家装</span>
				</li>
				<li id="t4">
					<a href="#">淋浴</a>
					<span>/</span>
					<a href="#">水槽</a>
					<a href="#"> 电动工具</a>
					<a href="#">手动工具</a>	
				</li>
				<li>
					<a href="#">仪器仪表</a>
					<a href="#">浴霸</a>
					<span>/</span>
					<a href="#">排气</a>
					<a href="#">灯具</a>
				</li>
			</ul>
		</div>
	</body>
</html>
